<template>
	<div class="detail">
		<div class="all">
			<div class="one">
				<div class="one-left">
					订单编号:
				</div>
				<div class="one-right">
					{{orders.orderId}}
				</div>
			</div>
			<div class="one">
				<div class="one-left">
					服务编号:
				</div>
				<div class="one-right">
					{{orders.serviceId}}
				</div>
			</div>
			<div class="one">
				<div class="one-left">
					核销码:
				</div>
				<div class="one-right">
					{{orders.verificationCode}}
				</div>
			</div>
			<div class="one">
				<div class="one-left">
					商家名称:
				</div>
				<div class="one-right">
					{{orders.merchantName}}
				</div>
			</div>
			<div class="one">
				<div class="one-left">
					买家:
				</div>
				<div class="one-right">
					{{orders.userName}}{{orders.phone}}
				</div>
			</div>
			<div class="one">
				<div class="one-left">
					订单状态:
				</div>
				<div class="one-right">
					{{getStatusText(orders.status)}}
				</div>
			</div>
			<div class="one">
				<div class="one-left">
					下单时间:
				</div>
				<div class="one-right">
					{{orders.orderTime}}
				</div>
			</div>
			<div class="one">
				<div class="one-left">
					预约时间:
				</div>
				<div class="one-right">
					{{orders.reservationTime}}
				</div>
			</div>
			<div class="two">
				<div class="two-left">
					原价:
				</div>
				<div class="two-right">
					{{orders.originalPrice}}
				</div>
			</div>
			<div class="two">
				<div class="two-left">
					优惠:
				</div>
				<div class="two-right">
					{{orders.preferentialMoney}}
				</div>
			</div>
			<div class="two">
				<div class="two-left">
					实付金额:
				</div>
				<div class="two-right">
					{{orders.price}}
				</div>
			</div>
			<div class="two">
				<div class="two-left">
					服务内容:
				</div>
				<div class="two-right">
					{{orders.introduction}}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"Detail",
		dicts: ['cf_order_status'],
		data() {
			return{
				orders:{},
				      orderStatusDict: [  
				        { value: 0, label: '待支付' },  
				        { value: 1, label: '已取消' },  
				        { value: 2, label: '已退款' },  
				        { value: 3, label: '待核销' },
						{ value: 4, label: '已完成' }
				      ] 
			}
		},
		created() {
			this.getList();
		},
		methods:{
			getList(){
				const rowStr = this.$route.query.row
				this.orders =  rowStr
			},
			getStatusText(status){
				return this.orderStatusDict.find(item => item.value === status)?.label || '未知状态'
			}
		}
	}
</script>

<style>
	.detail{
		width: 100%;
		height: 800px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.all{
		width: 70%;
		height: 65%;
		border:1px solid #ccc;
		display: flex;
		flex-wrap: wrap;
	}
	.one{
		width: 50%;
		display: flex;
		border-bottom: 1px solid #ccc;
	}
	.one-left{
		width: 34%;
		background-color: gainsboro;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.one-right{
		width: 66%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.two{
		width: 100%;
		display: flex;
		border-bottom: 1px solid #ccc;
	}
	.two-left{
		width: 17%;
		background-color: gainsboro;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.two-right{
		width: 83%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>